<!--
1. 通过事件中心完成兄弟组件之间数据的交互
    1. 事件中心
        - 一个独立的 vue 实例  hub
    2. 增加事件
        - hub.$on(事件名，事件处理函数)
    3. 销毁事件
        - hub.$off(事件名)
    4. 触发事件
        - hub.$emit(事件名，参数)
2. 这个案例的难点其实是 this 的指向问题

-->


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../lib/vue.js"></script>
</head>
<body>

    <div id="app">
        <com1></com1>
        <com2></com2>
    </div>

    <template id="com1">
        <div>
            组件1---{{msg1}}
            <button @click="handle">加2</button>
        </div>
    </template>
    <template id="com2">
        <div>
            组件2---{{msg2}}
            <button @click="handle">加1</button>
        </div>
    </template>

    <script>
        var hub=new Vue();

        Vue.component('com1',{
            template:"#com1",
            data(){
                return {
                    msg1:0
                }
            },
            methods:{
                handle(){
                    hub.$emit('add-2',2);
                }
            },
            created:function () {
                hub.$on('add-1', (val) => {
                    this.msg1+=val;
                });
            }
        });
        Vue.component('com2',{
            template:"#com2",
            data(){
                return {
                    msg2:0
                }
            },
            methods:{
                handle(){
                    hub.$emit('add-1',1);
                }
            },
            created:function () {
                hub.$on('add-2', (val) => {
                    this.msg2+=val;
                });
            }
        });
        var vm=new Vue({
            el:"#app"
        })
    </script>
</body>
</html>